<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	</ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">GMap - Info Window</h1>
		<div class="entry">
			<p>When a marker is selected, an info window can be displayed to provide detailed information.</p>
			
			<h:form>
			
				<p:gmap center="36.890257,30.707417" zoom="13" type="HYBRID" model="#{mapBean.advancedModel}" style="width:600px;height:400px">

                    <p:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}" />
					
					<p:gmapInfoWindow>
						<p:outputPanel style="text-align:center;display:block;margin:auto:">
							
								<p:graphicImage value="/images/antalya/#{mapBean.marker.data}" height="150"/>
								<br />
								<h:outputText value="#{mapBean.marker.title}" />
								
						</p:outputPanel>
						
					</p:gmapInfoWindow>
				</p:gmap>

				<!-- Preload for demo -->
				<p:outputPanel style="display:none">
					<p:graphicImage value="/images/antalya/konyaalti.png" />
					<p:graphicImage value="/images/antalya/ataturkparki.png" />
					<p:graphicImage value="/images/antalya/kaleici.png" />
					<p:graphicImage value="/images/antalya/karaalioglu.png" />
				</p:outputPanel>
			
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="gmapInfoWindow.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;

    &lt;p:gmap center="36.890257,30.707417" zoom="13" type="HYBRID" model="\#{mapBean.advancedModel}" style="width:600px;height:400px"&gt;

        &lt;p:ajax event="overlaySelect" listener="\#{mapBean.onMarkerSelect}" /&gt;

        &lt;p:gmapInfoWindow&gt;
            &lt;p:outputPanel style="text-align:center;display:block;margin:auto:"&gt;

                    &lt;p:graphicImage value="/images/antalya/\#{mapBean.marker.data}" height="150"/&gt;
                    &lt;br /&gt;
                    &lt;h:outputText value="\#{mapBean.marker.title}" /&gt;

            &lt;/p:outputPanel&gt;

        &lt;/p:gmapInfoWindow&gt;
    &lt;/p:gmap&gt;

&lt;/h:form&gt;
					</pre>
				</p:tab>
				
				<p:tab title="MapBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import org.primefaces.event.map.OverlaySelectEvent;
import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Marker;

public class MapBean implements Serializable {
	
	private MapModel advancedModel;

	private Marker marker;

	public MapBean() {
		advancedModel = new DefaultMapModel();
		
		//Shared coordinates
		LatLng coord1 = new LatLng(36.879466, 30.667648);
		LatLng coord2 = new LatLng(36.883707, 30.689216);
		LatLng coord3 = new LatLng(36.879703, 30.706707);
		LatLng coord4 = new LatLng(36.885233, 30.702323);
		
		//Icons and Data
		advancedModel.addOverlay(new Marker(coord1, "Konyaalti", "konyaalti.png", "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"));
		advancedModel.addOverlay(new Marker(coord2, "Ataturk Parki", "ataturkparki.png"));
		advancedModel.addOverlay(new Marker(coord4, "Kaleici", "kaleici.png", "http://maps.google.com/mapfiles/ms/micons/pink-dot.png"));
		advancedModel.addOverlay(new Marker(coord3, "Karaalioglu Parki", "karaalioglu.png", "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"));
	}

	public MapModel getAdvancedModel() {
		return advancedModel;
	}
	
	public void onMarkerSelect(OverlaySelectEvent event) {
		marker = (Marker) event.getMarker();
	}
	
	public Marker getMarker() {
		return marker;
	}
}
					</pre>
				</p:tab>
			</p:tabView>									
		</div>
	</ui:define>
</ui:composition>